<script lang="ts" setup>
//幻灯片
import { ref, watchEffect } from "vue";
import { IndexShowData } from "@/api/interface";
import CarouselSlide from "@/components/Index/Carousel-Slide.vue";

//接收数据
export interface Props {
  data: IndexShowData[];
  link: number;
}
const props = defineProps<Props>();

//处理幻灯片高度
const cardHeight = ref("552px");
//当前屏幕宽度
const as = ref(window.innerWidth);
watchEffect(() => {
  //拿到屏幕宽度

  if (as.value > 1068) {
    cardHeight.value = "552px";
  } else if (as.value > 734) {
    cardHeight.value = "390px";
  } else {
    cardHeight.value = "335px";
  }
});
</script>
<template>
  <section class="featured" v-if="data.length !== 0">
    <div class="section-content">
      <div class="section-head">特写</div>
      <div class="featured-view-all-wrapper">
        <router-link :to="`/category/${link}`" class="nr-cta-primary-dark">
          查看全部
        </router-link>
      </div>
      <div class="gallery">
        <!--幻灯片开始-->
        <el-carousel
          :autoplay="false"
          :height="cardHeight"
          indicator-position="outside"
          arrow="always"
        >
          <el-carousel-item v-for="item in data" :key="item.id">
            <CarouselSlide :data="item"></CarouselSlide>
          </el-carousel-item>
        </el-carousel>
        <!--幻灯片结束-->
      </div>
    </div>
  </section>
  <div v-else>
    <el-skeleton animated :throttle="500">
      <template #template>
        <section class="featured">
          <div class="section-content">
            <div class="section-head">
              <el-skeleton-item
                variant="text"
                style="width: 5%; padding: 10px 30px"
              />
            </div>
            <div class="featured-view-all-wrapper">
              <el-skeleton-item
                variant="text"
                style="width: auto; padding: 10px 30px"
              />
            </div>
            <div class="gallery">
              <!--幻灯片开始-->
              <el-skeleton-item
                variant="image"
                style="width: auto; height: 100%"
              />
              <!--幻灯片结束-->
            </div>
          </div>
        </section>
      </template>
    </el-skeleton>
  </div>
</template>

<style lang="less" scoped>
.el-carousel__item {
  background-color: #000000;
  border-radius: 16px;
}

.featured {
  background-color: #161617;
  color: #fff;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 80px;
  .section-content {
    display: flex;
    flex-wrap: wrap;
    .section-head {
      margin-top: 0;
      color: #fff;
      flex: 1;
    }
  }
  .featured-view-all-wrapper {
    margin: 0;
    margin-bottom: 24px;
    height: 100%;
    align-self: flex-end;
    .nr-cta-primary-dark {
      letter-spacing: 0em;
    }
  }
}

.gallery {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}

@media only screen and (max-width: 1068px) {
  .featured {
    padding-top: 64px;
    padding-bottom: 64px;
    .section-head {
      margin-top: 5px;
    }
    .featured-view-all-wrapper {
      margin-bottom: 20px;
    }
  }
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 692px;
  }
}
@media only screen and (max-width: 734px) {
  .featured {
    padding-top: 40px;
    padding-bottom: 40px;
    .section-head {
      margin-top: 0;
    }
    .featured-view-all-wrapper {
      margin-left: auto;
      margin-right: auto;
      order: 1;
      margin-top: 24px;

      margin-bottom: 0;
    }
  }
  .section-content {
    max-width: 366px;
  }
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 87.5%;
  }
}
</style>
